<template>
	<view class="content">
		<view class="money">
			<view class="m_title">可用余额</view>
			<view class="m_text"><text>￥</text>99000.00</view>
			<view class="m_cont">
				<view class="m_c_item m_c_left">
					<view>冻结余额</view>
					<view>￥<text>0.00</text></view>
				</view>
				<view class="line"></view>
				<view class="m_c_item m_c_right">
					<view>账户余额</view>
					<view>￥<text>99000.00</text></view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="i_title">提现金额</view>
			<input type="number" placeholder="请输入提现金额" />
			<view class="i_title">选择提现方式</view>
			<view class="i_item" v-for="(item,i) in list">
				<image class="i_img" :src="item.img" mode="widthFix"></image>
				<text>{{item.text}}</text>
				<image class="i_yn" v-if="i==index" src="@/static/img/extract_y.png" mode="widthFix"></image>
				<image class="i_yn" v-else src="@/static/img/extract_n.png" mode="widthFix"></image>
			</view>
				<view class="i_list">
					<view class="i_l_item" v-for="(item,i) in 2">
						<image src="@/static/img/extract_demo.png" mode="widthFix"></image>
						<text>中国工商银行（2536）</text>
						<uni-icons v-if="cardIndex==i" type="checkmarkempty" color="#E99552" size="26"></uni-icons>
					</view>
					<view class="i_l_item" >
						<image src="@/static/img/extract_add.png" mode="widthFix"></image>
						<text>添加新的银行卡</text>
					</view>
				</view>
		</view>
		<view class="default_btn">立即提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						img: require('@/static/img/extract_img1.png'),
						text: '提现至支付宝'
					},
					{
						img: require('@/static/img/extract_img2.png'),
						text: '提现至微信'
					},
					{
						img: require('@/static/img/extract_img3.png'),
						text: '提现至银行卡'
					}
				],
				index: 0,
				cardIndex: 0
			}
		},
		onLoad() {},
		methods: {},
	}
</script>
<style scoped lang="scss">
	.content {
		/* background: white; */
		overflow: hidden;
	}

	.money {
		width: 690rpx;
		height: 320rpx;
		background: url('../../static/img/extract_bg.png') no-repeat;
		background-size: cover;
		color: white;
		margin: 40rpx 30rpx;
		overflow: hidden;

		.m_title {
			margin: 30rpx 0 0 30rpx;
		}

		.m_text {
			height: 70rpx;
			line-height: 70rpx;
			margin: 12rpx 0 0 30rpx;
			font-weight: 700;
			font-size: 48rpx;

			text {
				font-size: 28rpx;
			}
		}

		.m_cont {
			display: flex;
			align-items: center;
			padding: 30rpx;

			.line {
				width: 3rpx;
				height: 52rpx;
				background-color: #FFE8E8;
				// border: 2rpx solid #FFE8E8;
				// opacity: 0.3;
			}

			.m_c_left {
				width: 246rpx;
			}

			.m_c_right {
				flex: 1;
				text-align: center;
			}

			.m_c_item {
				view {
					&:nth-of-type(2) {
						font-weight: 500;
						margin-top: 20rpx;

						text {
							font-size: 32rpx;
						}
					}
				}
			}
		}
	}

	.info {
		margin: 40rpx 30rpx 60rpx;
		padding: 30rpx 30rpx 1rpx;
		background-color: white;
		border-radius: 12rpx;

		.i_title {
			font-weight: 500;
			font-size: 32rpx;
		}

		input {
			width: 600rpx;
			height: 80rpx;
			font-size: 26rpx;
			padding-left: 30rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			margin: 30rpx 0 60rpx;
		}
		.i_item {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			.i_img {
				width: 48rpx;
				margin-right: 20rpx;
			}
			text {
				flex: 1;
			}
			.i_yn {
				width: 28rpx;
			}
		}
			.i_list {
				margin: 30rpx 0 0 68rpx;
				image {
					width: 40rpx;
					margin-right: 16rpx;
				}
				.i_l_item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-bottom: 40rpx;
				}
			}
	}
</style>